<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #mask{
            width: 600px;
            background: rgba(0,0,0,0.05);
            /*padding: 3rem 0 1rem 0;*/
            /*display: none;*/
            margin: 0 auto;
            /*margin-top: 51%;*/
        }

        #mask p{
            text-align: center;
            font-size: 20px;
            color: rgba(0,0,0,0.5);
        }

        img{
            display: block;
            width:40%;
            margin: 0 auto;
        }

        .start{
            width: 600px;
            margin: 0 auto;
            text-align: center;
        }

        #start{
            background-color: aqua;
            width: 100px;
            height: 30px;
        }

        #yuyin{
            width: 600px;
            margin: 30px auto;
            text-align: center;
        }

        #audio-container {
            width: 600px;
            margin: 0 auto;
            text-align: center;
        }

        audio {
            display: block;
            margin: 0 auto 10px;
        }

        .result{
            width: 600px;
            margin: 0 auto;
            text-align: center;
        }

        textarea{
            width: 400px;
            height: 300px;
        }


        #uploadflieContainer  {
            width: 600px;
            margin: 0 auto;
        }
    </style>
</head>
<script th:src="@{/js/axios.js}"></script>
<body>

<div id="mask">
    <img th:src="@{/img/a.jpg}" alt="">
    <p id="tip">点击按钮开始录音</p>
</div>
<div class="start">
    <button id="start" class="ui-btn ui-btn-primary">开始</button>
</div>

<div id="uploadflieContainer" >
    上传语音：<input type="file" id="uploadflie" accept="audio/mp3 ,audio/m4a,audio/wav,audio/pcm">
</div>

<div id="yuyin">
    语音内容：<div id="audio-container"></div>
</div>


<div class="result">
    识别结果：<textarea id="result"></textarea>
</div>



<script th:src="@{/js/recorder.js}"></script>


<script>

    var fileUpload = document.getElementById('uploadflie');

    var result = document.getElementById('result');

    fileUpload.onchange = function () {


        var file = this.files;

        console.log(file);

        var reader = new FileReader();
        reader.readAsDataURL(file[0]);
        reader.onload = function () {

            var data = reader.result
            let newData = data.replace(/^data:audio\/\w+;base64,/, '') // replace + 正则 把前缀替换成空

            axios({
                // 请求方法
                method: 'GET',
                url: '/test5',
                // url参数
                params: {
                    myData: newData,
                }
            }).then(function (response) {
                console.log(response.data);
                let string = response.data;
                var textArea = document.getElementById('result');
                // 处理成功情况
                textArea.innerHTML = string;
            });
        };
    }
</script>


<script>

    var container = document.querySelector('#audio-container');

    var recorder = new Recorder({
        sampleRate: 16000, //采样频率，默认为44100Hz(标准MP3采样率)
        bitRate: 16, //比特率，默认为128kbps(标准MP3质量)
        success: function(){ //成功回调函数
            // start.disabled = false;
        },
        error: function(msg){ //失败回调函数
            alert(msg);
        },
        fix: function(msg){ //不支持H5录音回调函数
            alert(msg);
        }
    });

    var mask = document.getElementById('mask');
    var start = document.querySelector('#start');
    var tip = document.getElementById('tip');
    var flag = true;


    start.addEventListener('click',function(){
        console.log(flag);
        if(flag){
            tip.innerText="正在录音";
            timer = setTimeout(function(){
                var audio = document.querySelectorAll('audio');
                for(var i = 0; i < audio.length; i++){
                    if(!audio[i].paused){
                        audio[i].pause();
                    }
                }
                start.innerHTML="再次点击结束";
                recorder.start();

            },500);
        }else{
            recorder.stop();
            recorder.getBlob(function(blob){
                var audio = document.createElement('audio');

                console.log(blob);

                audio.src = URL.createObjectURL(blob);

                audio.controls = true;
                container.appendChild(audio);



                const fileReader = new FileReader();
                fileReader.onload = (e) => {
                    this.mp3Base64 = e.target.result;
                    let newData = this.mp3Base64.replace(/^data:audio\/\w+;base64,/, '') // replace + 正则 把前缀替换成空

                    axios({
                        // 请求方法
                        method: 'GET',
                        url: '/test5',
                        // url参数
                        params: {
                            myData: newData,
                        }
                    }).then(function (response) {

                        console.log(response.data);
                        let string = response.data;
                        var textArea = document.getElementById('result');
                        // 处理成功情况
                        textArea.innerHTML = string;
                    });

                };

                fileReader.readAsDataURL(blob);

            });
            tip.innerText="点击按钮开始录音";;
            start.innerHTML="开始";
            clearTimeout(timer);
        }
        flag = !flag;
    });
</script>

</body>
</html>